import React from 'react'
import css from './style.less'
import DragState from './DragState'

// 这个组件的主要任务是什么呢？确定toolBar的位置和高度,还有处理拖动的功能，但是这个数据并不能保存到当前这个组件因为col需要根据拖动的结果来设定宽度
// 需要的条件？获取对应col的宽度和offset
// function checkRefCycleTime(colRef, cb) {
//   let count = 0;
//   let intervalId = setInterval(() => {
//     count++
//     console.log('interval interval inteveral', count, colRef, colRef.current)
//     if ((colRef && colRef.current) || count > 9) {
//       clearInterval(intervalId)
//       intervalId = null
//       cb()
//     }
//   }, 16)
// }
//
// 有几个问题需要做
// 第一全局需要有一个OnMouseUp的监听器 来取消可拖动的状态
// 还有一个问题 就是说可能需要table区域的onMove事件来， 仅仅在这个bar上做这个事不行的，
// 鼠标的移动速度太快了
class ResizeBar extends React.PureComponent {
  constructor(props) {
    super(props);
    this.dragGlobalState = new DragState()
  }
  onMouseDown = (ev) => {
    this.dragGlobalState.setDragStart(ev, this)
  }
  render() {
    const { offsetLeft, height } = this.props
    return (<div
      className={css.rzHandle}
      onMouseDown={this.onMouseDown}
      onMouseUp={this.onMouseUp}
      onMouseMove={this.onMouseMove}
      style={{
        ...styles,
        transform: `translateX(${offsetLeft - 5}px)`,
        height: `${height}px`
      }}
    />)
  }
}
const styles = {
  width: '10px',
  'backgroundColor': 'black'
}

export default ResizeBar
